<script>
export default {
	data() {
		return {
			keyword: '',
			timer: null,
			markers: [],
			list: [],
			keyuyue: [],
			bukeyuyue: [],
			devicePark: [],
			rate: [],
			searchParams: {
				is_park: '',  // 搜索车位传1
				is_power: '', // 搜索电桩传1, 
				lat: '39.90923',     // 维度
				lng: '116.397428',     // 经度
				power_rate: '', // 搜索电桩功率
				speed: '',   // 快充传'快',慢充传'慢'
				type: ''     // 1物业 2个人 3联营电站 4非联营电站
			},
			lat:'',
			lng:''
			
		}
	},
	onLoad() {
		this.getKeyuyue()
		this.getBukeyuyue()
		this.getDevicePark()
		this.getRate()
		var that = this
		that.getList()
		
		//经纬度 默认用户当前位置
		uni.getLocation({
			type: 'wgs84',
			success: (res) => {
				that.searchParams.lat = res.latitude
				that.searchParams.lng = res.longitude
				that.lat = res.latitude
				that.lng = res.longitude
				that.getList()
			},
			fail: (e) => {
				console.log(e)
			}
		})
	},
	watch: {
		searchParams: {
			handler(newVal, oldVal) {
				this.markers[0] = {
						id:999999,
						width:30,
						height:30,
						latitude: this.searchParams.lat,
						longitude: this.searchParams.lng,
						iconPath: '/static/icon/position.png', // 自定义图标路径，如果需要的话
					}
				var that = this
				setTimeout(() => {
					that.getList()
				}, 500)
			},
			deep: true
		}
	},
	methods: {
		dingwei(){
			this.searchParams.lat = this.lat
			this.searchParams.lng = this.lng
			this.markers[0] = {
					id:999999,
					width:30,
					height:30,
					latitude: this.searchParams.lat,
					longitude: this.searchParams.lng,
					iconPath: '/static/icon/position.png', // 自定义图标路径，如果需要的话
				}
		},
		async getList() {
			const res = await this.http("get", "/api/station/lists", this.searchParams)
			this.list = res.data
			var list = this.list
			var arr = [
				{
					id:999999,
					width:30,
					height:30,
					latitude: this.searchParams.lat,
					longitude: this.searchParams.lng,
					iconPath: '/static/icon/position.png', // 自定义图标路径，如果需要的话
				}
			];
			for(var i=0;i<list.length;i++){
				arr.push({
			                id: parseInt(list[i]['id']),
			                latitude: list[i]['lat'],
			                longitude: list[i]['lng'],
							width:40,
							height:40,
			                title: list[i]['name'], // 标记点标题
			                iconPath: '/static/icon/marker.png', // 自定义图标路径，如果需要的话
			                callout: { // 气泡框配置，显示详细信息等
			                    content: list[i]['name'], // 显示的信息内容
			                    display: 'ALWAYS' // 始终显示气泡框，或者根据需要设置为'BYCLICK'或'BYCLICK_SOFTLY'等
			                }
			            })
			}
			this.markers = arr
		},
		reset() {
			this.searchParams.is_park = ''
			this.searchParams.is_power = ''
			this.searchParams.power_rate = ''
			this.searchParams.speed = ''
			this.searchParams.type = ''
		},
		log(e) {
			console.log(e)
		},
		onMapChange(e) {
			if(e){
				if(e.detail){
					if(e.type=='end'){
						if(e.detail.centerLocation){
							this.searchParams.lat = e.detail.centerLocation.latitude
							this.searchParams.lng = e.detail.centerLocation.longitude
						}
					}
				}
			}
		},
		async getRate() {
			const res = await this.http("get", "/api/station/rate_select")
			this.rate = res.data
		},
		async getKeyuyue() {
			const res = await this.http("get", "/api/station/can_order", {
				status: 1
			})
			this.keyuyue = res.data
		},
		async getBukeyuyue() {
			const res = await this.http("get", "/api/station/no_can_order", {
				status: 2
			})
			this.bukeyuyue = res.data
		},
		async getDevicePark() {
			const res = await this.http("get", "/api/station/park_device_select")
			this.devicePark = res.data
		},
		goTo(url) {
			uni.navigateTo({
				url: url
			})
		},
		zanwei(){
			uni.showToast({
				title:'暂未开放'
			})
		},
	}
}
</script>
<template>
	<view class="w-full h-full">
		<div class="fixed">
			<div class="between p-30">
				<div class="flex shadow  bg-white h-70 rounded-35 flex-1">
					<image src="/static/icon/search.png" mode="widthFix" class="w-30 flex-shirnk-0 ml-20"></image>
					<input type="text" placeholder="请输入电站名" class="flex-1 ml-20" v-model="keyword">
					<div class="text-orange mr-20 pl-20 fz32"
						@click="goTo('/pages/index/menu/search?keyword=' + keyword)"
						style="border-left: 1px solid #FF8F1F;">搜索</div>
				</div>
				<div class="flex ml-20">
					<div class="h-70 rounded-35 w-70 shadow center bg-white" style="position: relative;">
						<image src="/static/icon/help.png" mode="widthFix" class="w-40"></image>
						<button open-type="contact" style="background-color: transparent;position: absolute;top: 0;left: 0;width: 100%;height: 100%;">
						</button>
					</div>
					<!-- <div class="h-70 rounded-35 shadow center pl-20 pr-20 ml-20 bg-white">
						<image src="/static/icon/address2.png" mode="widthFix" class="w-35"></image>
						<div class="fz32 text-orange ml-10">重庆</div>
					</div> -->
				</div>
			</div>
			<div class="pl-30 pr-30 bg-white">
				<!-- <div style="word-break: break-all;">
					{{ JSON.stringify(searchParams) }}
				</div> -->
				<div class="shadow p-20 rounded-15">
					<div class="between text-black fz28">
						<picker mode="selector" range-key="label" :range="keyuyue"
							@change="(e) => { searchParams.type = keyuyue[e.detail.value].value }">
							<div class="flex">
								{{ searchParams.type && keyuyue.find(item => item.value == searchParams.type) ?
									keyuyue.find(item => item.value == searchParams.type).label :
									'可预约' }}
								<image src="/static/icon/san.png" mode="widthFix" class="w-25 ml-10 mt-5"></image>
							</div>
						</picker>
						<picker mode="selector" range-key="label" :range="bukeyuyue"
							@change="(e) => { searchParams.type = bukeyuyue[e.detail.value].value }">
							<div class="flex">
								{{ searchParams.type && bukeyuyue.find(item => item.value == searchParams.type) ?
									bukeyuyue.find(item => item.value == searchParams.type).label :
									'不可预约'
								}}
								<image src="/static/icon/san.png" mode="widthFix" class="w-25 ml-10 mt-5"></image>
							</div>
						</picker>
						<picker mode="selector" :range="devicePark" range-key="label" @change="(e) => {
							if (devicePark[e.detail.value].label == '车位') {
								searchParams.is_park = '1'
								searchParams.is_power = ''
							}else if (devicePark[e.detail.value].label == '电桩'){
								searchParams.is_park = ''
								searchParams.is_power = '1'
							}else{
								searchParams.is_park = ''
								searchParams.is_power = ''
							}
						}">
							<div class="flex">
								<text v-if="searchParams.is_park=='1'">车位</text>
								<text v-else-if="searchParams.is_power == '1'">电桩</text>
								<text v-else>车位/电桩</text>
								<image src="/static/icon/san.png" mode="widthFix" class="w-25 ml-10 mt-5"></image>
							</div>
							
						</picker>
						<picker mode="selector" :range="rate" range-key="value" @change="(e) => {
							searchParams.power_rate = rate[e.detail.value].value
						}">
							<div class="flex">
								{{ searchParams.power_rate || '功率' }}
								<image src="/static/icon/san.png" mode="widthFix" class="w-25 ml-10 mt-5"></image>
							</div>
						</picker>
					</div>
					<div class="between fz28 mt-30">
						<div class="flex">
							<div class="fz28 rounded-30 pt-5 pb-5 pl-20 pr-20 bg-gray-300 text-gray-600"
								:class="{ 'bg-orange text-white': searchParams.speed == '快' }"
								@click="searchParams.speed = '快'">快充</div>
							<div class="fz28 rounded-30 pt-5 pb-5 pl-20 pr-20  bg-gray-300 text-gray-600 ml-30"
								:class="{ 'bg-orange text-white': searchParams.speed == '慢' }"
								@click="searchParams.speed = '慢'">慢充</div>
						</div>
						<div class="bg-orange text-white rounded-30 pt-5 pb-5 pl-20 pr-20" @click="reset">重置</div>
					</div>
				</div>
			</div>
		</div>
		<map class="w-full h-full" :latitude="searchParams.lat" :longitude="searchParams.lng" :markers="markers"
			@regionchange="onMapChange"></map>
		
		<image @click="dingwei" src="/static/icon/dingwei.png" style="width: 40px;height: 40px;position: fixed;top: 60%;left: 80%;" class="w-30 flex-shirnk-0 ml-20"></image>

		<div class="swiper">
			<swiper next-margin="30rpx" previous-margin="30rpx" :indicator-dots="false" :autoplay="false"
				:interval="3000" :duration="500" style="height: 350rpx;">
				<swiper-item v-for="item in list" :key="item.id">
					<view class="pl-20 pr-20 " @click="goTo('/pages/detail/stationDetail?id=' + item.id)">
						<view class="swiper-item shadow p-20 rounded-15 bg-white">
							<div class="flex">
								<image :src="item.pic" mode="aspectFill" class="w-30 h-30 flex-shirnk-0">
								</image>
								<div class="fz44 ml-10 ellipsis">{{ item.name }}</div>
							</div>
							<div class="ellipsis fz28 text-gray-600 mt-10 mb-10">
								{{ item.address }}
							</div>
							<div class="fz28 text-gray-600 mt-20 mb-10">
								<text style="background-color: red;padding: 3px;border-radius: 5px; color: #fff; margin-right: 10px;">{{ item.type_name }}</text>
								<text v-if="item.open_name" style=" border: 1px solid #ccc; padding: 3px;border-radius: 5px; color: #ccc; margin-right: 10px;">{{ item.open_name }}</text>
								<text v-if="item.charge_name" style="border: 1px solid #ccc; padding: 3px;border-radius: 5px; color: #ccc; margin-right: 10px;">{{ item.charge_name }}</text>
							</div>
							
							<div class="between mb-20 pb-20" style="border-bottom: 1rpx solid #A6A6A6;">
								<div class="flex" style="align-items: flex-end;">
									<div class="fz44 text-red">{{ item.price }}</div>
									<div class="fz28 text-black mb-5 ml-5">元/度</div>
								</div>

								<div class="flex mt-10">
									<div class="flex mr-40" v-if="item.kuai_total">
										<div class="status bg-red text-white fz28 font-bold  p-5 rounded-10 w-40 h-40 center flex-shirnk-0"
											style="align-self: flex-start;">
											快
										</div>
										<div class="ml-10"> <text class="text-red">{{ item.kuai_status }}</text> /{{item.kuai_total}}</div>
									</div>
									<div class="flex"  v-if="item.man_total">
										<div class="status bg-orange text-white fz28 font-bold  p-5 rounded-10 w-40 h-40 center flex-shirnk-0"
											style="align-self: flex-start;">
											慢
										</div>
										<div class="ml-10"> <text class="text-orange">{{ item.man_status }}</text> /{{item.man_total}}</div>
									</div>
								</div>
							</div>
							<div class="flex" style="justify-content: flex-end;">
								<image src="/static/icon/address.png" mode="widthFix" class="w-30 mr-10"></image>
								<div class="fz32 text-red">{{ item.range }}km</div>
							</div>
						</view>
					</view>
				</swiper-item>
			</swiper>
		</div>

	</view>
</template>


<style>
.swiper-item {}

.text-white {
	color: #fff;
}
button:active {
  outline: none;
}
button {
  box-shadow: none; /* 初始状态下没有阴影 */
}
button:focus {
  outline: none;
}
button {
  -webkit-tap-highlight-color: transparent; /* iOS上点击时的背景高亮 */
}
button::after{
	border: none;
}
.swiper {
	position: absolute;
	bottom: 5px;
	left: 0;
	width: 100%;
	z-index: 9;
}

page {
	height: 100%;
	width: 100%;
	overflow: hidden;
}

.fixed {
	position: absolute;
	width: 100%;
	top: 0;
	left: 0;
	z-index: 9;
}
</style>